<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
    <title>¿Cómo Funciona una Aplicación Web?</title>
</head>
<body>
<div id="tutorial">
    <div class="title">¿Cómo Funciona una Aplicación Web?</div>
    <div class="textCenter">
        <object type="application/x-shockwave-flash" style="width:550px; height:451px;" data="http://www.youtube.com/v/g8jtbIiD05I?fs=1">
            <param name="movie" value="http://www.youtube.com/v/g8jtbIiD05I?fs=1" /><param name="allowFullScreen" value="true" />
        </object>
    </div>
    <p>Para ser un buen desarrollador es importante entender lo que sucede “detrás de cámaras” en una aplicación web. Veamos un ejemplo paso a paso:</p>
    <ol>
        <li>
            <p>Introducimos el URL en nuestro browser</p>
            <p>Digamos que abrimos nuestro browser e introducimos la siguiente dirección:</p>
            <div class="textCenter">http://www.mipaginadeejemplo.com:80/inicio</div>
            <p>Lo primero que la computadora hace es dividir el URL en segmentos, de esta forma:<p>
            <div class="url">
                <div class="red">http://<br/>protocolo</div>
                <div class="blue">www.mipaginadeejemplo.com<br/>servidor</div>
                <div class="green">:80<br/>puerto</div>
                <div class="purple">/inicio<br/>recurso</div>
            </div>
            <div class="clear">&nbsp;</div>
            <p>(por lo general el protocolo y el número de puerto no son necesarios, ya que se asumen los valores por default: http como protocolo y 80 como número de puerto.)</p>
        </li>
        <li>
            <p>Se establece la conexión al servidor</p>
            <p>Mediante el protocolo TCP/IP, la computadora establece una conexión con el servidor, que puede estar ubicado en cualquier lugar del planeta.</p>
        </li>
        <li>
            <p>Se envía una solicitud HTTP</p>
            <p>Toda la comunicación en Internet se realiza siguiendo el protocolo HTTP, que indica qué formato debe utilizar la computadora para solicitar información a un servidor, y qué formato debe utilizar el servidor para responder.</p>
            <p>En nuestro caso, la solicitud tendría esta forma:</p>
            <div class="file">
                <div class="leftNote">
                    <br/>Línea Inicial---&gt;
                    <br/>Headers---&gt;
                    <br/><br/><br/>Body---&gt;&nbsp;
                </div>
                <div class="content">
                    <div class="title">Solicitud HTTP</div>
                    <div class="text">
                        GET /index.html HTTP/1.0
                        <br/>Accept: text/*
                        <br/>Host: www.mipaginadejemplo.com
                        <br/><br/>&nbsp;
                    </div>
                </div>
            </div>
            <div class="clear">&nbsp;</div>
            <p>Cuando el servidor recibe la solicitud, inicia lo que se conoce como server-side scripting. En este paso, el servidor toma la solicitud HTTP y utiliza un programa para decidir cómo procesarla. Por lo general este programa está escrito en un lenguaje de programación como PHP, ASP, Ruby, Python, Java o Perl.</p>
            <p>También es común que durante este paso el servidor se conecte a una base de datos para obtener o almacenar información. Las bases de datos más comunes son MySQL, PostgreSQL, Oracle y Microsoft SQL Server.</p>
        </li>
        <li>
            <p>El servidor envía una respuesta HTTP<p>
            <p>En nuestro caso, la respuesta HTTP podría verse de la siguiente forma:</p>
            <div class="file">
                <div class="leftNote">
                    <br/>Línea Inicial---&gt;
                    <br/>Headers---&gt;
                    <br/><br/><br/>
                    Body---&gt;&nbsp;
                </div>
                <div class="content">
                    <div class="title">Respuesta HTTP</div>
                    <div class="text">
                        HTTP/1.0 200 OK
                        <br/>Content-Type: text/html
                        <br/>Content-Length: 109
<pre>&lt;html&gt;
&lt;head&gt;&lt;title&gt;Ejemplo&lt;/title&gt;
&lt;body&gt;
    &lt;p&gt;Bienvenido a nuestro portal web.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
                    </div>
                </div>
            </div>
            <div class="clear">&nbsp;</div>
            <p>Después de enviar la respuesta HTTP, la conexión entre el servidor y el browser se cierra, y cada uno sigue por su camino.</p>
        </li>
        <li>
            <p>Convertir HTML a DOM</p>
            <p>Por lo general, el servidor envía como respuesta un archivo HTML. Entonces, el browser lee el HTML y construye una representación interna del archivo. Esta representación se conoce como HTML DOM, y tiene una estructura de árbol, de esta forma:</p>
            <div class="textCenter"><img src="/images/dom.gif" alt="DOM" width="486px" height="266px"/></div>
        </li>
        <li>
            <p>Aplicar Javascript al DOM</p>
            <p>Este es el paso que se conoce como client-side scripting. En este paso, el browser ejecuta el código Javascript y aplica los cambios al HTML DOM según lo indicado. Javascript permite hacer todo tipo de cambios, como añadir o eliminar elementos del DOM, modificar los atributos o el contenido de los elementos, cambiar posiciones, entre otros.</p>
        </li>
        <li>
            <p>Estilizar con CSS y mostrar en pantalla</p>
            <p>Después de obtener la representación interna del HTML, el browser debe decidir cómo va a mostrar el archivo en pantalla. Para esto se utilizan las reglas CSS, que indican los aspectos visuales de la página (tipo de letra a utilizar, colores, tamaños, posición, etc.) Finalmente, el browser muestra la página web en la pantalla, y el proceso se da por terminado.</p>
        </li>
    </ol>
    <p>Cuando el usuario interactúa con la página y da clic en un link o un botón, el proceso empieza nuevamente, con la única diferencia de que el usuario no tiene que introducir manualmente el nuevo URL, sino que éste se obtiene del link o el botón que se apretó.</p>
</div>
</body>
</html> 
